<template>
  <div class="app-container home">
    <!-- 烟花画布容器 -->
    <div class="fireworks-container">
      <canvas id="canvas" ref="canvas">Canvas is not supported in your browser.</canvas>
    </div>

    <!-- 原有内容 -->
    <el-row :gutter="20">
      <el-col :sm="24" :lg="12" style="padding-left: 20px; position: relative; z-index: 10;">
        <h2>敏敏敏后台管理框架</h2>
        <p>
          hello world,欢迎使用
        </p>
        <p>
          <b>当前版本:</b> <span>v{{ version }}</span>
        </p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
class Particle {
  constructor(x, y, hue) {
    this.x = x;
    this.y = y;
    this.coordinates = [];
    this.coordinateCount = 5;
    while (this.coordinateCount--) {
      this.coordinates.push([this.x, this.y]);
    }
    this.angle = Math.random() * Math.PI * 2;
    this.speed = Math.random() * 9 + 1; // 1-10
    this.friction = 0.95;
    this.gravity = 1;
    this.hue = Math.random() * 40 + hue - 20; // hue-20 to hue+20
    this.brightness = Math.random() * 30 + 50; // 50-80
    this.alpha = 1;
    this.decay = Math.random() * 0.015 + 0.015; // 0.015-0.03
  }

  update() {
    this.coordinates.pop();
    this.coordinates.unshift([this.x, this.y]);
    this.speed *= this.friction;
    this.x += Math.cos(this.angle) * this.speed;
    this.y += Math.sin(this.angle) * this.speed + this.gravity;
    this.alpha -= this.decay;

    // 返回是否应该移除粒子
    return this.alpha <= this.decay;
  }

  draw(ctx) {
    ctx.beginPath();
    ctx.moveTo(
      this.coordinates[this.coordinates.length - 1][0],
      this.coordinates[this.coordinates.length - 1][1]
    );
    ctx.lineTo(this.x, this.y);
    ctx.strokeStyle = `hsla(${this.hue}, 100%, ${this.brightness}%, ${this.alpha})`;
    ctx.stroke();
  }
}

class Firework {
  constructor(sx, sy, tx, ty) {
    this.x = sx;
    this.y = sy;
    this.sx = sx;
    this.sy = sy;
    this.tx = tx;
    this.ty = ty;

    // 计算距离
    const xDistance = tx - sx;
    const yDistance = ty - sy;
    this.distanceToTarget = Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));

    this.distanceTraveled = 0;
    this.coordinates = [];
    this.coordinateCount = 3;
    while (this.coordinateCount--) {
      this.coordinates.push([this.x, this.y]);
    }

    this.angle = Math.atan2(ty - sy, tx - sx);
    this.speed = 2;
    this.acceleration = 1.05;
    this.brightness = Math.random() * 20 + 50; // 50-70
    this.targetRadius = 1;
  }

  update() {
    this.coordinates.pop();
    this.coordinates.unshift([this.x, this.y]);

    if (this.targetRadius < 8) {
      this.targetRadius += 0.3;
    } else {
      this.targetRadius = 1;
    }

    this.speed *= this.acceleration;

    // 速度分量
    const vx = Math.cos(this.angle) * this.speed;
    const vy = Math.sin(this.angle) * this.speed;

    // 计算移动的距离
    const dx = this.x + vx - this.sx;
    const dy = this.y + vy - this.sy;
    this.distanceTraveled = Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));

    // 检查是否到达目标
    if (this.distanceTraveled >= this.distanceToTarget) {
      return true; // 烟花应该爆炸
    } else {
      this.x += vx;
      this.y += vy;
      return false; // 烟花还在飞行
    }
  }

  draw(ctx, hue) {
    ctx.beginPath();
    ctx.moveTo(
      this.coordinates[this.coordinates.length - 1][0],
      this.coordinates[this.coordinates.length - 1][1]
    );
    ctx.lineTo(this.x, this.y);
    ctx.strokeStyle = `hsl(${hue}, 100%, ${this.brightness}%)`;
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(this.tx, this.ty, this.targetRadius, 0, Math.PI * 2);
    ctx.stroke();
  }
}

export default {
  name: "Index",
  data() {
    return {
      version: "1.0.0",
      fireworks: [],
      particles: [],
      hue: 120,
      limiterTotal: 5,
      limiterTick: 0,
      timerTotal: 80,
      timerTick: 0,
      mousedown: false,
      mx: 0,
      my: 0,
      animationId: null,
      running: true
    }
  },
  mounted() {
    this.initFireworks();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    this.running = false;
    if (this.animationId) {
      cancelAnimationFrame(this.animationId);
    }
    window.removeEventListener('resize', this.handleResize);

    // 移除事件监听器
    const canvas = this.$refs.canvas;
    if (canvas) {
      canvas.removeEventListener('mousemove', this.handleMouseMove);
      canvas.removeEventListener('mousedown', this.handleMouseDown);
      canvas.removeEventListener('mouseup', this.handleMouseUp);
    }
  },
  methods: {
    initFireworks() {
      const canvas = this.$refs.canvas;
      if (!canvas) return;

      // 设置画布尺寸
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // 初始化事件监听
      canvas.addEventListener('mousemove', this.handleMouseMove);
      canvas.addEventListener('mousedown', this.handleMouseDown);
      canvas.addEventListener('mouseup', this.handleMouseUp);

      // 启动动画
      this.loop();
    },

    handleResize() {
      const canvas = this.$refs.canvas;
      if (canvas) {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      }
    },

    handleMouseMove(e) {
      const canvas = this.$refs.canvas;
      if (!canvas) return;
      const rect = canvas.getBoundingClientRect();
      this.mx = e.clientX - rect.left;
      this.my = e.clientY - rect.top;
    },

    handleMouseDown(e) {
      e.preventDefault();
      const canvas = this.$refs.canvas;
      if (!canvas) return;
      const rect = canvas.getBoundingClientRect();
      this.mx = e.clientX - rect.left;
      this.my = e.clientY - rect.top;
      this.mousedown = true;
    },

    handleMouseUp(e) {
      e.preventDefault();
      this.mousedown = false;
    },

    createParticles(x, y) {
      for (let i = 0; i < 30; i++) {
        this.particles.push(new Particle(x, y, this.hue));
      }
    },

    loop() {
      if (!this.running) return;

      this.animationId = requestAnimationFrame(this.loop);
      const canvas = this.$refs.canvas;
      if (!canvas) return;

      const ctx = canvas.getContext('2d');
      const cw = canvas.width;
      const ch = canvas.height;

      // 更新色调
      this.hue += 0.5;

      // 清除画布（带尾迹效果）
      ctx.globalCompositeOperation = 'destination-out';
      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
      ctx.fillRect(0, 0, cw, ch);
      ctx.globalCompositeOperation = 'lighter';

      // 更新并绘制烟花
      for (let i = this.fireworks.length - 1; i >= 0; i--) {
        const firework = this.fireworks[i];
        firework.draw(ctx, this.hue);

        if (firework.update()) {
          // 烟花到达目标位置，创建粒子并移除烟花
          this.createParticles(firework.tx, firework.ty);
          this.fireworks.splice(i, 1);
        }
      }

      // 更新并绘制粒子
      for (let i = this.particles.length - 1; i >= 0; i--) {
        const particle = this.particles[i];

        if (particle.update()) {
          // 粒子已经消失，移除它
          this.particles.splice(i, 1);
        } else {
          particle.draw(ctx);
        }
      }

      // 自动发射烟花
      if (this.timerTick >= this.timerTotal) {
        if (!this.mousedown) {
          this.fireworks.push(
            new Firework(
              cw / 2,
              ch,
              Math.random() * cw,
              Math.random() * (ch / 2)
            )
          );
          this.timerTick = 0;
        }
      } else {
        this.timerTick++;
      }

      // 鼠标按下时发射烟花
      if (this.limiterTick >= this.limiterTotal) {
        if (this.mousedown) {
          this.fireworks.push(new Firework(cw / 2, ch, this.mx, this.my));
          this.limiterTick = 0;
        }
      } else {
        this.limiterTick++;
      }
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: #000;
  margin: 0;
  padding: 0;

  .fireworks-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

    canvas {
      cursor: crosshair;
      display: block;
      width: 100%;
      height: 100%;
    }
  }
}

/* 调整原有内容样式 */
.el-row {
  position: relative;
  z-index: 10;
}

h2, p {
  color: #fff;
  text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
</style>
